<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
  <div>
  <!--
    .lazy修饰符:
    把v-model的本质中@input事件改变为@change事件
    当input失去焦点的时候才会触发更新数据

    .trim修饰符
      取掉收集的数据的前后空白字符
   -->
    <input type="text" v-model.lazy.trim="msg"/>
      {{msg}}

      <hr/>

      <div>
        <!--
            .number修饰符是在v-model收集表单数据时,把收集的数据转为number类型
            转换的标准是:类似于parseFloat,但是如果遇到无法转换的,则直接收集为字符串了
         -->
          <input type="text" v-model.number="count"/>
          {{count}}
      </div>
  </div>
</div>
<script>
  const vm = new Vue({
    el:"#app",
    data(){
      return{
        msg:"",
        count:0,
      }
    }
  })
</script>
</body>
</html>